<!-- 活动页面 -->
<template>
  <div>
    <div class="header">
          <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="item in 6" :key="item">
        <img src="@/images/3.png" alt width="100%">
      </el-carousel-item>
    </el-carousel>
    </div>
    <el-col :span="20" :offset="2" class=main>
      <span>进行中</span><span>/</span>
      <span>已结束</span>
           <div class="actrow" v-for="(rows,index) in actrows" :key="index">
        <!-- 每一张图片区域 -->
        <div class="actInfo" v-for="(act,index) in rows" :key="index">
          <!-- 图片 -->
          <div class="act-box">
            <router-link :to="{name: 'actinfo'}">
              <el-card shadow="always" :body-style="{ padding: '0px' }">
                <div class="card" style=" height:280px; width: 400px;">
                  <act-card></act-card>
                </div>
              </el-card>
            </router-link>
          </div>
        </div>
      </div>
      <div class="fenye" style="text-align:center;margin:80px auto;">
        <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
      </div>
    </el-col>

  </div>
</template>

<script>
import ActCard from "@/subcomponents/actCard.vue";
export default {
  data() {
    return {
      actLists: [
        {
          id: 1
        },
        {
          id: 2
        },

        {
          id: 3
        },

        {
          id: 4
        },

        {
          id: 5
        },
        {
          id: 6
        }
      ],
       actrows: []
    };
  },
  components: {
    ActCard,
    
  },
  mounted: function() {
 
    this.changeAct();
  },
  methods: {
    changeAct() {
      var rowNum = parseInt(Math.ceil(this.actLists.length / 3));
      var n = 0;
      for (var i = 0; i < rowNum; i++) {
        var rows = [];
        n = i * 3;
        for (var j = n; j < n + 3; j++) {
          rows.push(this.actLists[j]);
        }
        this.actrows.push(rows);
      }
      return;
    }
  }
};
</script>
<style lang='scss' scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.main{
  margin-top:50px;
  margin-bottom: 50px;
  span{
    font-size: 16px;
    letter-spacing: 5px;
    padding:0 10px;
  }
 .actrow {
      display: flex;
      justify-content: space-between;
      margin: 50px 10px 0 10px;
    }
}

</style>